<template>
	<view>
		<!-- 顶部自定义导航栏 -->
		<view class="customNavBar">
			<view class="leftBackHeader">
				<view class="backImg" @click="goBack">
					<image src="/static/activity/fanhui btn@2x.png" mode="aspectFill"></image>
				</view>
				<view class="infoBox">
					<image src="/static/main/yonghutouxiang@2x.png" mode="aspectFill"></image>
					<text>米开朗基米</text>
				</view>
			</view>
			<view class="rightShare">
				<view :class="guanzhuStatus === 1 ? 'guanzhuBox' : 'actguanzhuBox'  " @click="gotoGuanzhu">
					{{ guanzhuStatus === 1 ? '关注' : '已关注' }}
				</view>
				<view class="shareImg">
					<image src="/static/activity/share.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 页面主要内容 -->
		<view class="mainBox">
			<view class="bodyBox">
				<view class="operationImg">
					<!-- 轮播图 -->
					<view class="swiper-container">
						<swiper class="swiper" :indicator-dots="false" @change="onSwiperChange">
							<swiper-item v-for="(item, index) in swiperItems2" :key="index">
								<image class="swiper-image" :src="item.img" mode="aspectFit"></image>
							</swiper-item>
						</swiper>
					</view>
					<!-- 自定义指示点 -->
					<view class="indicator-container">
						<view v-for="(item, index) in swiperList" :key="index" class="indicator"
							@click="changeSlide(index)">
							<image :src="index === activeIndex ? activeImg : inactiveImg" mode="aspectFit"
								class="indicator-image">
							</image>
						</view>
					</view>
				</view>
				<view class="operationText">
					<view class="title">
						{{note.noteTitle}}
					</view>
					<view class="text">{{note.noteContent}}</view>
					<!-- 打赏图标 -->
					<view class="rewardImg" @click="rewardOperate">
						<image src="/static/main/dashang@2x (1).png" mode="aspectFit"></image>
						<view class="rewardText">打赏作者</view>
					</view>
					<view class="tagListBox">
						<text class="tagItem" v-for="(item,index) in tagList " :key="index"> {{item.name}} </text>
					</view>
					<view class="searchBox">
						<image src="/static/search/sousuoicon@2x.png" mode="aspectFit"></image>
						<input type="text" placeholder="相关搜索 哈基米美食" />
					</view>
					<view class="Tips">
						04-23 ·甘肃
					</view>
				</view>
			</view>
			<!-- 评论区 -->
			<view class="commentBox">
				<view class="comTitle">
					评论（{{totalCount}}）
				</view>
				<view class="comLine"></view>
				<gui-empty v-if="replys.length==0" style="height: 200rpx;">
					<template v-slot:img>
						<view class="gui-flex gui-rows gui-justify-content-center">
							<text class="gui-icons gui-empty-icon gui-color-gray "
								style="font-size: 40rpx;">&#xe6b8;</text>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-block gui-text-center gui-margin-top gui-color-gray">还没有评论哦~</text>
					</template>
				</gui-empty>

				<!-- 留言 -->
				<view style="margin-top:30rpx;" class="gui-flex gui-row gui-nowrap gui-bg-white gui-space-between "
					v-for="(item, index) in replys" :key="index">
					<image @tap="goCard(item.authorId)" style="width: 65rpx;height: 65rpx;" :src="item.avatarUrl"
						class="gui-comments-face "></image>
					<view :ref="item.replyId" :class="[domId == item.replyId?'reply-checked':'']" style="width: 610rpx;"
						class="gui-comments-body ">
						<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
							style="position: relative;">
							<text @tap="goCard(item.authorId)" class="gui-comments-header-text gui-text"
								style="color: #ACACAC;font-size: 26rpx;">{{item.authorName}}

								<text
									style="font-size: 22rpx!important;background:#FFECEB !important;color: #FA5F5A; border-radius: 20rpx;width: 90rpx;padding: 5rpx 10rpx;text-align: center; "
									v-show="item.authorId==note.authorId">
									作者
								</text>
							</text>

							<view @tap="upReply(item)"
								style="position: absolute;right: 0;top:40rpx;width: 50rpx;font-size: 24rpx;text-align: center;">
								<text style="width: 50rpx;text-align: center;"
									:class="['gui-comments-header-text','gui-icons','xhs-font28',item.isUp ? 'zan-active xhs-font35' : 'gui-color-gray']">{{item.isUp?'&#xe605;':'&#xe6ad;'}}
								</text>

								<view class="gui-color-gray" v-show="item.upCount>0">{{item.upCount}}

								</view>
							</view>
						</view>
						<text class=" gui-block"
							style="width: 80%;font-size: 26rpx;margin-top: 8rpx;">{{item.replayContent}}</text>
						<view style="margin-top: 8rpx;" class="gui-comments-imgs gui-flex gui-rows gui-wrap "
							v-if="item.imgs">
							<view @click.stop="showImgs(index,0)">
								<gui-image :src="item.imgs[0]" borderRadius="10rpx"></gui-image>
							</view>
						</view>
						<view class="gui-color-gray" style="font-size: 24rpx; margin-top: 8rpx;">

							<text>{{formatDate(item.createTime)}} {{item.ipRealAddress}}</text>
							<text style="color: #5A5A5A;margin-left: 10rpx;" @tap="openComment(item.replyId)">回复</text>
						</view>
						<view class="xhs-gray-color"
							style="font-size: 24rpx; margin-top: 8rpx;background:#F8F8F8 !important;border-radius: 20rpx;width: 80rpx;padding: 5rpx;text-align: center; "
							v-show="item.firstReplay==1">
							首评
						</view>


						<view v-if="item.reply">
							<view style="margin-top: 20rpx;position: relative;"
								class="gui-flex gui-row gui-align-items-start  " v-for="(itemRe, indexRe) in item.reply"
								:key="indexRe" :ref="itemRe.replyId"
								:class="[domId == itemRe.replyId?'reply-checked':'']">
								<view>
									<image @tap="goCard(itemRe.authorId)" style="width: 40rpx;height: 40rpx"
										class="gui-list-image ucenter-face-image " :src="itemRe.avatarUrl"
										mode="aspectFill"></image>
								</view>
								<view style="margin-left: 10rpx;">

									<view @tap="goCard(itemRe.authorId)"
										style="height: 20rpx;color: #ACACAC;font-size: 26rpx;">{{itemRe.authorName}}
										<text
											style="font-size: 22rpx!important;background:#FFECEB !important;color: #FA5F5A; border-radius: 20rpx;width: 90rpx;padding: 5rpx 10rpx;text-align: center; "
											v-show="itemRe.authorId==note.authorId">
											作者
										</text>
									</view>

									<view style="margin-top: 20rpx;">
										<text class=" gui-block" style="font-size: 26rpx;margin-top: 8rpx;">
											<text v-show="itemRe.parentAuthorName">回复</text><text
												style="height: 20rpx;color: #ACACAC;font-size: 26rpx;"
												v-show="itemRe.parentAuthorName" @tap="goCard(itemRe.authorId)">:
												{{itemRe.parentAuthorName}}</text>
											{{itemRe.replayContent}}
										</text>

									</view>

									<view class="gui-color-gray" style="font-size: 24rpx; margin-top: 8rpx;">
										<text>{{formatDate(itemRe.createTime)}} {{itemRe.ipRealAddress}}</text>
										<text style="color: #5A5A5A;margin-left: 10rpx;"
											@tap="openComment(item.replyId,itemRe.replyId)">回复</text>
									</view>
								</view>


								<view @tap="upReply(itemRe)"
									style="position: absolute;right: 0;top:0;width: 50rpx;font-size: 24rpx;text-align: center;">
									<text style="width: 50rpx;text-align: center;"
										:class="['gui-comments-header-text','gui-icons','xhs-font28',itemRe.isUp ? 'zan-active xhs-font35' : 'gui-color-gray']">{{itemRe.isUp?'&#xe605;':'&#xe6ad;'}}
									</text>
									<view class="gui-color-gray" v-show="itemRe.upCount>0">{{itemRe.upCount}}</view>
								</view>

							</view>


						</view>
					</view>


				</view>

			</view>


			<!-- 评论组件 -->
			<gui-submit-comment :focus="true" :placeholder="'爱评论的人运气都不差'" ref="guisubmitcomment" :isImg="true"
				@submit="submit" @close="close"></gui-submit-comment>

		</view>

		<!-- 自定义页面底部导航栏 -->
		<view class="operationBtn">
			<view class="leftBtn">
				<view class="dis" @click="upNote(note)">
					<image v-if="!note.isUp" src="/static/activity/zan.png" mode="aspectFit"></image>
					<image v-else src="/static/main/dianzan@2x (1).png" mode=""></image>
					<text>{{note.upCount}}</text>
				</view>
				<view class="dis">
					<image src="/static/activity/pinglun.png" mode="aspectFit"></image>
					<text>{{totalCount}}</text>
				</view>
				<view class="dis" @click="starNote(note)">
					<image v-if="!note.isStar" src="/static/activity/shoucang.png" mode="aspectFit"></image>
					<image v-else src="/static/main/shoucang@2x.png" mode=""></image>
					<text>{{note.starCount}}</text>
				</view>
				<view class="dis">
					<image src="/static/main/dashang@2x.png" mode="aspectFit"></image>
					<text>585</text>
				</view>
			</view>
			<view class="rightBtn" @tap="openComment()">
				<image src="/static/activity/liuyan.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mask" v-if="isPopupVisible" @click="closePopup"></view>

		<!-- 打赏弹窗 -->
		<view class="popup" v-if="isPopupVisible">
			<view class="popup-content">
				<view class="popupTop">
					<view class="popupBtn">
					</view>
					<view class="popupText">
						打赏
					</view>
				</view>
				<view class="popupContent">
					<view class="popupContentItem">
						<image src="/static/main/dashang1@2x.png" mode="aspectFit"></image>
						<text>￥1.00</text>
					</view>
					<view class="popupContentItem">
						<image src="/static/main/dashang2@2x.png" mode="aspectFit"></image>
						<text>￥1.00</text>
					</view>
					<view class="popupContentItem">
						<image src="/static/main/dashang3@2x.png" mode="aspectFit"></image>
						<text>￥1.00</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 报名弹窗 -->
		<view class="success-mask" v-if="showSuccessMask">
			<view class="success-popup">
				关注成功
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgIndex: 0,
				swiperItems2: [],
				note: {},
				timer: null,
				// 模拟评论数据 (实际项目来自api请求)
				replys: [],
				totalCount: 0,
				buttonShow: true,
				domId: '',
				user: uni.app.getStorage('user'),
				author: {},
				activeImg: "/static/activity/lunbo icon1@2x.png",
				inactiveImg: '/static/activity/lunbo icon4@2x.png',
				activeIndex: 0,
				swiperList: [{
					image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
				}, {
					image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
				}, {
					image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
				}, {
					image: '/static/main/pic@2x.png', // 替换为你的小猫图片URL
				}, ],
				tagList: [{
					name: '#上海宠物活动',
					id: 1
				}, {
					name: '#同城宠物交友',
					id: 2
				}, {
					name: '#宠物交友活动',
					id: 3
				}, ],
				commentList: [{
						headerImg: '/static/main/pinglunqutouxiang@2x.png',
						name: '我想游手好闲',
						isauthor: true,
						time: '3-30',
						isZan: false,
						zanNum: 464,
						text: '小狗厨师把自己喂的圆嘟嘟，简直可爱！',
						address: '',
						replyNum: 0,
						comment: []
					},
					{
						headerImg: '/static/main/pinglunqutouxiang@2x.png',
						name: 'Miyoco',
						isauthor: false,
						time: '3-30',
						isZan: true,
						zanNum: 235,
						text: '好可爱，炒鸡可爱，萌萌嘟',
						replyNum: 65,
						comment: [{
								headerImg: '/static/main/pinglunqutouxiang@2x.png',
								name: '小可乐粘豆包',
								isauthor: false,
								time: '3-30',
								address: '甘肃',
								isZan: false,
								text: '臣附议',
								comment: []
							},
							{
								headerImg: '/static/main/pinglunqutouxiang@2x.png',
								name: '小可乐粘豆包',
								isauthor: false,
								time: '3-30',
								address: '甘肃',
								isZan: false,
								text: '臣附议，还是粮食一起，不然我第一',
								comment: []
							},
						]
					},
					{
						headerImg: '/static/main/pinglunqutouxiang@2x.png',
						name: 'Miyoco',
						isauthor: false,
						time: '3-30',
						isZan: false,
						zanNum: 234,
						text: '好可爱，炒鸡可爱，萌萌嘟',
						address: '',
						replyNum: 0,
						comment: []
					},
				],
				isPopupVisible: false, // 控制弹窗的显示状态
				showSuccessMask: false,
				guanzhuStatus: 1, //关注按钮状态 1  关注  2  已关注
				isShowZan: true, //展示是否点赞
				isShowShoucang: true

			};
		},
		mounted() {
			if (!uni.app.isEmpty(this.domId)) {
				this.$nextTick(() => {
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: this.$refs[this.domId][0].$el.offsetTop,
							duration: 200
						})
					}, 200)
				})
			}
		},
		onLoad(options) {
			console.log(options);
			// let checkLogin = uni.app.checkLogin();
			this.getNoteDetail(options.noteId)
			this.getNoteReply(options.noteId)
			this.domId = options.domId
		},
		methods: {
			changeSlide(index) {
				this.activeIndex = index;
			},
			onSwiperChange(e) {
				this.activeIndex = e.detail.current;
			},
			goBack() {
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						// let ddd = {
						// 	hideNavBar: '0',
						// 	hideTotalNavBar: '0',
						// 	hideBottomSafeBar: '0',
						// 	navtitle: '待使用',
						// 	url: 'http://192.168.101.147:8080/#/pages/hotspot/orderDetailSuccess'
						// }
						// let d = JSON.stringify(ddd)
						// console.log(d, '都是对的')
						window.AndroidBridge.backEvent();
						console.log('运行Android上');
						break;
					case 'ios':
						window.webkit.messageHandlers.backEvent.postMessage({});
						break;
					default:
						console.log('运行在开发者工具上');
						break;
				}

			},
			// 点击打赏
			rewardOperate() {
				this.isPopupVisible = true;
			},
			closePopup() {
				this.isPopupVisible = false; // 隐藏弹窗
			},
			gotoGuanzhu() {
				this.showSuccessMask = true
				this.guanzhuStatus = 2
				// 3秒后自动关闭
				setTimeout(() => {
					this.showSuccessMask = false;
				}, 2000);
			},
			showZan() {
				this.isShowZan = !this.isShowZan
			},
			showShoucang() {
				this.isShowShoucang = !this.isShowShoucang
			},

			parserHtml(data) {
				return parserHtml.parserHTML(data);
			},
			getAuthor() {
				uni.app.post('/blog/author/getAuthor', {
					authorId: uni.getStorageSync("userId"),
					followAuthorId: this.note.authorId
				}, '', '', (res) => {
					console.log(res)
					this.author = res.data
				})
			},
			goBack: function() {
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						// let ddd = {
						// 	hideNavBar: '0',
						// 	hideTotalNavBar: '0',
						// 	hideBottomSafeBar: '0',
						// 	navtitle: '待使用',
						// 	url: 'http://192.168.101.147:8080/#/pages/hotspot/orderDetailSuccess'
						// }
						// let d = JSON.stringify(ddd)
						// console.log(d, '都是对的')
						window.AndroidBridge.backEvent();
						console.log('运行Android上');
						break;
					case 'ios':
						window.webkit.messageHandlers.backEvent.postMessage({});
						break;
					default:
						console.log('运行在开发者工具上');
						break;
				}


				uni.navigateBack({
					delta: 1
				});

				// uni.app.navigate('/pages/switchPages/index','switchTab')
			},
			editNote() {
				uni.app.navigate('/pages/editNote/editNote?noteId=' + this.note.noteId, 'redirectTo')
			},
			goCard(authorId) {
				return uni.app.goCard(authorId)
			},
			formatDate(date) {
				return uni.app.formatDate(date)
			},
			upReply(reply) {
				uni.app.post('/blog/action/upReply', reply, 'json', "", (res => {
					console.log(res.data)
					if (res.data) {
						reply.isUp = true
						reply.upCount++
					} else {
						reply.isUp = false
						reply.upCount--
					}
				}))
			},
			//点赞笔记
			upNote(notes) {
				notes.noteId = parseInt(notes.noteId);
				uni.app.post('/blog/action/upReply', notes, 'json', "", (res => {
					console.log(res.data)
					if (res.data) {
						notes.isUp = true
						notes.upCount++
					} else {
						notes.isUp = false
						notes.upCount--
					}
				}))
			},
			starNote(notes) {
				uni.app.post('/blog/action/starNote', notes, 'json', "", (res => {
					console.log(res.data)
					if (res.data) {
						notes.isStar = true
						notes.starCount++
					} else {
						notes.isStar = false
						notes.starCount--
					}
				}))
			},
			showImgs: function(commentsIndex, imgIndex) {
				console.log(commentsIndex, imgIndex);
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				})
			},
			swiperchange: function(e) {
				console.log(e);
			},
			setTimer() {
				if (this.timer != null) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					clearTimeout(this.timer);
					this.timer = null;
				}, 3000)
			},
			taped: function(e) {
				this.imgIndex = e;
				//当图片发生切换时显示tips三秒后关闭
				this.setTimer()
			},
			getNoteDetail(noteId) {
				uni.app.post('/blog/home/getNote', {
					noteId: noteId,
					keyword: "",
				}, '', '', (res => {
					console.log(res);
					this.note = res.data
					// this.note.noteContent = this.parserHtml(this.note.noteContent)
					this.getAuthor()
					console.log(this.note)
					if (this.note.imgList) {
						for (let i of this.note.imgList) {
							this.swiperItems2.push({
								img: i,
								url: '',
								title: '',
								opentype: 'click'
							})
						}
					}
					//请求成功后再弹tips
					this.setTimer()
				}))
			},
			getNoteReply(noteId) {
				uni.app.post('/blog/note/getNoteReply', {
					noteId: noteId,
					keyword: "",
					authorId: uni.getStorageSync("userId"),
					followId: uni.getStorageSync("userId"),
				}, '', '', (res => {
					console.log(res.data)
					this.replys = res.data.replys
					this.totalCount = res.data.totalCount
				}))
			},
			// 打开提窗口
			openComment: function(topParentId, parentId) {
				this.buttonShow = false;
				this.$refs.guisubmitcomment.open();
				this.$refs.guisubmitcomment.setAt(''); // 设置 at 信息
				// 模拟设置默认值， 不需要请删除
				this.$refs.guisubmitcomment.setContent(''); // 设置 at 信息

				this.$refs.guisubmitcomment.setData({
					...this.note,
					parentId: parentId,
					topParentId: topParentId
				}); // 设置 at 信息
			},
			// 关闭窗口
			close: function() {
				// 展示底部按钮
				this.buttonShow = true;
			},
			submit: function(e) {
				console.log(e)
				if (uni.app.isEmpty(e.content)) {
					uni.app.msg('请输入评论内容~')
					return
				}
				const replyData = {
					noteId: e.noteId,
					authorId: uni.getStorageSync("userId"),
					replayContent: e.content
				}
				if (!uni.app.isEmpty(e.topParentId)) {
					replyData.topParentId = e.topParentId
				}
				if (!uni.app.isEmpty(e.parentId)) {
					replyData.parentId = e.parentId
				}
				uni.app.post('/blog/action/replyNote', replyData, 'json', "", (res => {
					console.log(res)
					this.getNoteReply(e.noteId)
				}))
				console.log(e);
				// 评论数据以对象形式报错在 e 变量内，您可以连接 api 进行后续的功能开发
				// e.at - at 用户昵称
				// e.content 评论内容 , 可以此处进行字数验证
				// e.img 评论图片, 临时地址，可以结合 api 进行上传
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: 100vh;
	}

	/* 报名成功遮罩层 */
	.success-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1001;

		.success-popup {
			width: 480rpx;
			height: 72rpx;
			background-color: #ffffff;
			border-radius: 50rpx;
			text-align: center;
			line-height: 72rpx;
		}
	}

	.customNavBar {
		// position: sticky;
		// top: 0;
		position: fixed;
		top: 0%;
		left: 0;
		width: 100vw;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 1000;

		.leftBackHeader {
			display: flex;
			align-items: center;

			.backImg {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 100%;
					height: 100%;
				}

				// margin-right: 16rpx;
			}

			.infoBox {
				display: flex;
				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
				}

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #303030;
				}
			}
		}

		.rightShare {
			display: flex;
			align-items: center;

			.shareImg {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.guanzhuBox {
				width: 180rpx;
				height: 48rpx;
				background: #D9F700;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #303030;
				line-height: 48rpx;
				text-align: center;
				margin-right: 16rpx;
			}

			.actguanzhuBox {
				width: 180rpx;
				height: 48rpx;
				background: #F6F6F6;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #303030;
				line-height: 48rpx;
				text-align: center;
				margin-right: 16rpx;
			}
		}
	}

	.operationBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #FFFFFF;
		padding: 16rpx;
		box-sizing: border-box;

		.leftBtn {
			display: flex;

			.dis {
				display: flex;
				flex-direction: column;
				align-items: center;
				// align-items: center;
				margin-right: 48rpx;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				text {
					font-weight: bold;
					font-size: 24rpx;
					color: #7F7F7F;
				}
			}


		}

		.rightBtn image {
			width: 250rpx;
			height: 56rpx;
		}
	}

	.mainBox {
		// height: calc(100vh - 284rpx);
		// overflow-y: auto;
		padding-top: 120rpx;
		padding-bottom: 164rpx;
	}

	.bodyBox {
		background-color: #ffffff;
	}

	.operationImg {
		height: 924rpx;
		padding: 0 28rpx;

		.swiper-container {
			// position: relative;
			width: 100%;
			height: 100%;


			.swiper {
				width: 100%;
				height: 100%;

				.swiper-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.indicator-container {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8rpx;

			.indicator {
				width: 8rpx;
				height: 8rpx;

				.indicator-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.operationText {
		padding: 0 28rpx;
		margin-top: 50rpx;
		padding-bottom: 64rpx;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #303030;
			margin-bottom: 16rpx;
		}

		.text {
			font-weight: 400;
			font-size: 28rpx;
			color: #303030;
		}

		.rewardImg {
			margin: 48rpx auto 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 112rpx;
				height: 112rpx;
			}

			.rewardText {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #303030;
			}
		}

		.tagListBox {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
			margin-top: 40rpx;

			.tagItem {
				font-weight: 400;
				font-size: 28rpx;
				color: #C69C6D;
			}
		}

		.searchBox {
			margin-top: 32rpx;
			width: 674rpx;
			background: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			padding: 0 14rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			input {
				width: 100%;
				height: 60rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #303030;
				line-height: 30rpx;
			}
		}

		.Tips {
			margin-top: 32rpx;
			// margin-bottom: 64rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #7F7F7F;
		}
	}

	.commentBox {
		margin-top: 16rpx;
		background-color: #ffffff;
		padding: 28rpx 32rpx;

		.comTitle {
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			margin-left: 12rpx;
		}

		.comLine {
			width: 100%;
			height: 0rpx;
			border: 2rpx solid #DBDBDB;
			opacity: 0.4;
			margin-top: 16rpx;
		}

		.commentListBox {

			.ComUserInfo {
				display: flex;
				margin-top: 32rpx;

				.headImg {
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.zanBox {
					display: flex;
					flex-direction: column;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-weight: 500;
						font-size: 20rpx;
						color: #7F7F7F;
					}
				}

				.ComNameText {
					flex: 1;

					.ComName {
						display: flex;
						align-items: center;

						.name {
							font-weight: 400;
							font-size: 28rpx;
							color: #7F7F7F;
							margin-right: 16rpx;
						}

						.isauthorBtn {
							width: 64rpx;
							height: 26rpx;
							background: #C69C6D;
							border-radius: 30rpx 30rpx 30rpx 30rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #F9F9F9;
							line-height: 26rpx;
							text-align: center;
						}
					}

					.ComText {
						font-weight: 400;
						font-size: 28rpx;
						color: #303030;
						line-height: 46rpx;
					}

					.ComTime {
						// margin-top: 16rpx;

						.time {
							font-weight: 500;
							font-size: 20rpx;
							color: #7F7F7F;
							margin-right: 32rpx;
						}

						.address {
							font-weight: 500;
							font-size: 20rpx;
							color: #303030;
						}

						.huifu {
							font-weight: 500;
							font-size: 20rpx;
							color: #303030;
						}
					}
				}
			}

			.replyComment {
				width: 80%;
				background: #F8F8F8;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-left: 80rpx;
				padding: 32rpx 16rpx 16rpx;
				margin-top: 16rpx;

				.replyCommentItem {
					display: flex;
					// align-items: flex-start;
					margin-bottom: 38rpx;

					.replyHeadImg {
						width: 48rpx;
						height: 48rpx;
						margin-right: 11rpx;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.replyInfoBox {
						.replyName {
							font-weight: 400;
							font-size: 28rpx;
							color: #7F7F7F;

						}

						.replyText {
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							.repltContent {
								font-weight: 400;
								font-size: 28rpx;
								color: #303030;
								margin-right: 16rpx;
							}

							.replyTime {
								font-weight: 500;
								font-size: 20rpx;
								color: #7F7F7F;
								margin-right: 16rpx;
							}

							.replyHuifu {
								font-weight: 500;
								font-size: 20rpx;
								color: #303030;
							}
						}
					}

				}

			}

			.replyLine {
				width: 100%;
				height: 0rpx;
				border: 2rpx solid #F1F1F1;
			}

			.replyNum {
				font-weight: 500;
				font-size: 20rpx;
				color: #000000;
				margin: 16rpx auto;
				text-align: center;
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.popup {
		position: fixed;
		left: 0;
		bottom: 0;
		/* 固定在页面底部 */
		width: 100%;
		height: 600rpx;
		/* 弹窗高度 */
		background-color: #fff;
		z-index: 1001;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.popup-content {
			padding: 14px 28rpx;

			.popupTop {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.popupBtn {
					margin: 0 auto;
					width: 96rpx;
					height: 8rpx;
					background: #F2F2F2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.popupText {
					margin: 32rpx auto;
					font-weight: bold;
					font-size: 30rpx;
					color: #303030;
					text-align: center;
				}
			}

			.popupContent {
				display: flex;

				.popupContentItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 32rpx;

					image {
						width: 210rpx;
						height: 210rpx;
					}

					text {
						margin-top: 16rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #303030;

					}
				}
			}
		}
	}
</style>